<template>
    <van-nav-bar
        title="标题"
        right-text="按钮"
        :left-arrow="isShowLeftArrow"
        @click-left="onClickLeft"
        @click-right="onClickRight"
        fixed
        placeholder
    >
        <template #right>
            <van-icon name="search" size="18" />
        </template>
    </van-nav-bar>
    <div id="content">
        <router-view />
    </div>
    <van-tabbar route @change="onChange">
        <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
        <van-tabbar-item to="/team" icon="search" name="team">寻找队伍</van-tabbar-item>
        <van-tabbar-item to="/my/team" icon="friends-o" name="user">我的队伍</van-tabbar-item>
        <van-tabbar-item to="/user" icon="contact-o" name="user">个人中心</van-tabbar-item>
    </van-tabbar>
</template>

<script setup lang="ts">
import router from '../router'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'

const route = useRoute()
const isShowLeftArrow = ref(false)
watch(
    () => route.name,
    newValue => {
        if (newValue === 'index' || newValue === 'team' || newValue === 'user' || newValue === 'my-team') {
            isShowLeftArrow.value = false
        } else {
            isShowLeftArrow.value = true
        }
    }
)

const onClickLeft = () => {
    router.back()
}
const onClickRight = () => {
    router.push('/search')
}

const onChange = (index) => console.log(index)
</script>

<style scoped>

#content {
    padding-bottom: 60px;
}

</style>